/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-08-28
 * @Description: 时间过滤算子表单配置
 -->
<template>
    <div class="filter__form operate_form">
        <sf-form ref="dataSetForm"
                 class="drawer-form__container"
                 :label-width="80">
            <div class="form__title form-item--first">
                <lang>时间条件</lang>
            </div>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>时间字段</lang>
                </sf-fieldlabel>
                <sf-select v-model="formData.timeProperty"
                           :default-width="fieldWidth"
                           :allow-search="true"
                           :allow-blank="false"
                           :default-disabled="disabledStatus"
                           :options="timeFieldList" />
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>时间区间</lang>
                </sf-fieldlabel>
                <sf-datefield v-model="dateTime"
                              type="dateTimeRange"
                              :show-second="true"
                              :default-width="310"
                              :allow-blank="false"
                              :default-disabled="disabledStatus"
                              placeholder="请选择时间" />
            </sf-form-item>
        </sf-form>
        <div v-if="!disabledStatus && showOperateBtn"
             class="add-operate__btn">
            <sf-button-primary
                class="btn-primary m-r10"
                @click.native="_submit">
                <lang>确定</lang>
            </sf-button-primary>
            <sf-button @click.native="_cancel">
                <lang>取消</lang>
            </sf-button>
        </div>
    </div>
</template>

<script lang=ts>
import { Vue, Component, Ref } from 'vue-property-decorator';

// import { deepClone } from 'src/util/deep_clone';
import {
    TIME_FILTER_DATA
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';

import moment from 'moment';
import { SfForm } from '@sxf/sf-vue-component';

const  DEFAULT_WIDTH = 310;


@Component({
    name: 'TimeFilterForm'
})
export default  class TimeFilterForm extends Vue {
    @Ref() dataSetForm!: SfForm

    formData = { ...TIME_FILTER_DATA }
    dateTime = {
        start:'',
        end:''
    }
    fieldWidth = DEFAULT_WIDTH
    disabledStatus = false
    showOperateBtn = false
    fieldList = []
    timeFieldList = []

    reset () {
        this.$nextTick(() => {
            // @ts-ignore
            this.$refs.form.clearInvalid();
        });
    }

    // clearInvalidMsg () {
    //     this.$nextTick(() => {
    //         this.$refs.dataSetForm?.clearInvalid();
    //     });
    // },
    getJsonValue () {
        // @ts-ignore
        this.formData.startDate = moment(this.dateTime.start).valueOf();
        // @ts-ignore
        this.formData.endDate = moment(this.dateTime.end).valueOf();
        return this.formData;
    }
    _submit () {
        // @ts-ignore
        this.formData.startDate = moment(this.dateTime.start).valueOf();
        // @ts-ignore
        this.formData.endDate = moment(this.dateTime.end).valueOf();
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }
    setFieldList (data) {
        this.fieldList = data;
        this.timeFieldList = data;
    }


    setJsonValue (data: typeof TIME_FILTER_DATA) {
        this.formData = Object.assign(this.formData, data);

        //需要情况报错
        // this.clearInvalidMsg();
    }

    isValid () {
        return this.dataSetForm.isValid();
    }
};
</script>

<style lang="less">
    .filter__form{
        .add-condition__date-picker {
            width: 310px;
            height: 30px;
            border-radius:0;
            &.allowblank-error {
                border: 1px solid #f55151;
            }
        }
        .filter-list{
            .remove{
                cursor: pointer;
                &:hover{
                        color: #204ed9
                    }
            }
            .filter-item{
                margin-bottom: 10px;
            }
            .sfv-select{
                margin-right: 6px;
            }
            .add-filter{
                width: 360px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 30px;
                border: 1px dashed rgba(73,80,96,0.3);
                border-radius: 2px;
                cursor: pointer;
                .iconsip-add{
                    color: inherit;
                }
            }
        }
    }
</style>

